<template>
	<view>
		<view style="padding-top: 26rpx ;display: flex;width: 200rpx;">
			<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;color: grey;">发票详情</text>
		</view>
		<view class="common" style="padding-top: 36rpx ;margin-top: 20rpx;">
			<view style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">抬头类型</view>
			<view>
				<radio-group name="headerType">
					<label v-for="(item, index) in headerMode" :key="index" @click="radioClick(index)">
						<radio style="transform: scale(0.8);margin-left: 40rpx;" :value="headerType" :checked="index===headerType" />{{item.headerType}}
					</label>
				</radio-group>
			</view>
		</view>
		<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
		</view>
		<view class="common">
			<view style="padding-top: 36rpx ;display: flex;width: 276rpx;">
				<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">公司名称</text>
			</view>
			<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
				<input class="contentFont" style="width: 100%;" v-model="companyName" placeholder="请输入公司名称" />
			</view>
			<view style="margin: 40rpx 60rpx;" @click="addHeader()">
				<image src="../static/order/calendar.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			
		</view>
		<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
		</view>
		<view class="common" v-if="headerType==0">
			<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
				<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">公司税号</text>
			</view>
			<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
				<input class="contentFont" style="width: 100%;" v-model="taxNo" placeholder="请输入公司税号" />
			</view>
		</view>
		<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
		</view>
		<view class="common">
			<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
				<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">更多内容</text>
			</view>
			<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
				<input class="contentFont" style="width: 100%;" v-model="remark" placeholder="填写备注、地址等(非必填)" />
			</view>
		</view>
		<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
		</view>
		
		<view class="common" style="margin-top: 30rpx;">
			<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
				<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">总金额</text>
			</view>
			<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
				<text  style="font-size: 32rpx;font-weight: 400;"><text style="color: #fca800;">{{price}}</text><text style="margin-left: 10rpx;">元</text></text>
			</view>
		</view>
		<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
			<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;color: grey;">接收方式</text>
		</view>
		<view class="common" style="margin-top: 20rpx;">
			<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
				<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">电子邮箱</text>
			</view>
			<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
				<input class="contentFont" style="width: 100%;" v-model="email" placeholder="请输入电子邮箱" />
			</view>
		</view>
		<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
		</view>
		<view style="height: 150rpx;width: 100%;background-color: #fff;position: fixed;bottom: 0;">
			<button style="height: 100rpx;width: 90%;background-color: #626262;color: #fff;margin-top: 26rpx;">提交</button>
		</view>
		<!-- 添加抬头信息 -->
		<u-popup width="600rpx" border-radius="15" v-model="bindPhoneshow" mode="bottom">
			<view class="common">
				<view style="padding-top: 54rpx ;display: flex;">
					<text  style="font-size: 42rpx;margin-left: 236rpx;font-weight: 700;">添加发票抬头</text>
				</view>
			</view>
			<view class="common" style="padding-top: 36rpx ;margin-top: 20rpx;">
				<view style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">抬头类型</view>
				<view>
					<radio-group name="headerType">
						<label v-for="(item, index) in headerMode1" :key="index" @click="radioClick1(index)">
							<radio style="transform: scale(0.8);margin-left: 40rpx;" :value="headerType1" :checked="index===headerType1" />{{item.headerType1}}
						</label>
					</radio-group>
				</view>
			</view>
			<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
			</view>
			<view class="common">
				<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
					<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">公司名称</text>
				</view>
				<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
					<input class="contentFont" style="width: 100%;" v-model="companyName1" placeholder="请输入公司名称" />
				</view>
			</view>
			<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
			</view>
			<view class="common" v-if="headerType1==0">
				<view style="padding-top: 36rpx ;display: flex;width: 200rpx;">
					<text  style="font-size: 32rpx;margin-left: 20rpx;font-weight: 400;">公司税号</text>
				</view>
				<view style="padding: 36rpx 10rpx;border-bottom: #EAEAEA 1px solid;display: flex;flex-direction: row;width: 100%;">
					<input class="contentFont" style="width: 100%;" v-model="taxNo1" placeholder="请输入公司税号" />
				</view>
			</view>
			<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;;">
			</view>
			<view style="height: 150rpx;width: 100%;background-color: #fff;">
				<button style="height: 100rpx;width: 90%;background-color: #5f62c6;color: #fff;margin-top: 42rpx;">提交</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				headerMode: [{
						headerType: '企业单位'
					},
					{
						headerType: '个人/非企业单位'
					}
				],
				headerMode1: [{
						headerType1: '企业单位'
					},
					{
						headerType1: '个人/非企业单位'
					}
				],
				headerType:0,
				headerType1:0,
				taxNo:'',
				companyName:'',
				taxNo1:'',
				companyName1:'',
				remark:'',
				email:'',
				price:'',
				bindPhoneshow: false,
			}
		},
		onLoad(option) {
			let that = this;
			that.price=option.total;
		},
		methods: {
			//------------------选择抬头类型-----------
			radioClick: function(e) {
				this.headerType = e;
			},
			//------------------选择抬头类型-----------
			radioClick1: function(e) {
				this.headerType1 = e;
			},
			addHeader(){
				this.bindPhoneshow = true;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eaebec;
	}
	.common{
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
	}
	.contentFont {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #000;
	}


</style>
